<template>
	<view class="box">
		<!-- 头部 -->
		<view class="top">
			<image src="/static/zuo.svg" mode=""></image>
			<text>佳安公寓</text>
		</view>
		<!-- 轮播图 -->
		<view class="luns">
			<swiper indicator-dots="true" interval=2000 autoplay='true' indicator-color="#ccc"
				indicator-active-color="white">
				<swiper-item v-for="(item,index) in swiperlist" :key='index'>
					<image :src="item.imgSrc" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 详情1 -->
		<view class="xiang1">
			<view>
				<text>整租</text>
				<text>·</text>
				<text>佳安公寓</text>
				<text>三居室</text>
				<text>14500</text>
			</view>
		</view>
		<view class="xiang2">
			<view class="xi2">近地铁</view>
			<view class="xi3">精装</view>
			<view class="xi4">双卫生间</view>
			<view class="xi5">临时看房</view>
		</view>
		<view class="xiang3">
			<view>
				<view class="xia31">
					14500/月
				</view>
				<view class="xia32">
					租金
				</view>
			</view>
			<view>
				<view class="xia31">
					三室
				</view>
				<view class="xia32">
					租金
				</view>
			</view>
			<view>
				<view class="xia31">
					110平方
				</view>
				<view class="xia32">
					面积
				</view>
			</view>
		</view>
		<view class="xiang4">
			<view class="xia41">
				<view>装修：</view>
				<view>楼层：</view>
			</view>
			<view class="xia42">
				<view>精装</view>
				<view>中楼层</view>
			</view>
			<view class="xia43">
				<view>朝向：</view>
				<view>类型：</view>

			</view>
			<view class="xia42">
				<view>南</view>
				<view>普通住宅</view>
			</view>
		</view>
		<view class="ditu">
			<view>
				小区：整租 · 佳安公寓 3局室 14500
			</view>
			<image src="/static/lun1.jpg" mode=""></image>
		</view>
		<view class="fang">
			房屋配套
		</view>
		<view class="bottom">
			<button>已收藏</button>
			<button style="background-color: #59cfb6;">在线咨询</button>
			<button style="background-color: #078e71;">电话预定</button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				swiperlist:[]
			}
		},
		onLoad() {
			this.getSwoerData()
		},
		methods: {
			async getSwoerData(){
				const res=await uni.request({
					url:'http://localhost:8080/home/swiper',
					method:'GET'
				});
				if(res.statusCode==200){
					let dataList=res.data.body||res.data.data||res.data||[]
					this.swiperlist=dataList.map(item=>({
						...item,
						imgSrc:item.imgSrc.startsWith('http') ? item.imgSrc : 'http://localhost:8080'+item.imgSrc
					}))
				}
			}
		}
	}
</script>

<style>
	.box {
		width: 100%;
		height: 100%;
	}

	.top {
		width: 100%;
		display: flex;
		height: 30px;
		align-items: center;
	}

	.top image {
		width: 20px;
		height: 20px;
	}

	.top text {
		font-size: 14px;
		font-weight: 550;
		color: #59cfb6;
		margin-left: 145px;
	}

	.luns {
		height: 150px;
	}

	.luns image {
		height: 150px;
		width: 100%;
	}

	.xiang1 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.xiang1 text {
		margin-right: 10px;
	}

	.xiang2 {
		width: 90%;
		display: flex;
		margin-top: 10px;
		margin-left: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid #ccc;
	}

	.xiang2 view {
		background-color: red;
		padding: 5px;
		margin-right: 10px;
	}

	.xiang2 .xi2 {
		background-color: #dff3f8;
		color: #4ac1d2;
	}

	.xiang2 .xi3 {
		background-color: #e2f5ed;
		color: #81cd8d;
	}

	.xiang2 .xi4 {
		background-color: #e5f3fd;
		color: #ca539a;
	}

	.xiang2 .xi5 {
		background-color: #dff3f8;
		color: #e4ca44;
	}

	.xiang3 {
		margin-top: 15px;
		text-align: center;
		display: flex;
		justify-content: space-around;
		padding-bottom: 10px;
		border-bottom: 1px solid #ccc;
	}

	.xiang3 .xia31 {
		color: red;
		font-size: 20px;
	}

	.xia32 {
		font-size: 15px;
		color: #9d9e99;
		margin-top: 5px;
	}

	.xiang4 {
		display: flex;
		margin-top: 10px;
		margin-left: 40px;
	}

	.xiang4 .xia41 {
		color: red;
		margin-right: 10px;
	}

	.xia43 {
		color: red;
		margin-right: 10px;
		margin-left: 80px;
	}

	.ditu {
		margin-top: 20px;
		padding-top: 10px;
		background-color: #f6f6f6;
	}

	.ditu view {
		color: #078e71;
		margin-bottom: 10px;
	}

	.ditu image {
		width: 100%;
	}

	.fang {
		color: #c51679;
		margin-top: 10px;
		margin-left: 10px;
	}

	.bottom {
		width: 100%;
		display: flex;
		margin-top: 20px;
	}

	.bottom button {
		width: 120px;
		border-radius: 50px;
		border: 1px solid #ccc;
	}
</style>